@import 'mixin.scss';
@import 'color.scss';
$baseImage:"../../assets/images/pro_icons.png";
$backgroundColor-ebf0f1:#ebf0f1;
.pro-display {
    display: block;
    margin-left: rem(20px);
    background: url($baseImage) no-repeat left top;
}

.icons-larger {
    width: rem(40px);
    height: rem(42px);
    background-size: rem(48px) rem(165px);
}

.icons-largest {
    width: rem(40px);
    height: rem(36px);
    @include img-position(0, rem(-42px));
    background-size: rem(48px) rem(165px);
}

.filter-bar {
    position: relative;
    background-color: $color-white;
    li {
        @include flex;
        height: rem(77px);
        font-size: rem(30px);
        color: $color-666;
        span {
            display: block;
            text-align: center;
            line-height: rem(77px);
            position: relative;
        }
        .sx-sort {
            display: inline-block;
            width: rem(16px);
            height: rem(16px);
            background: url($baseImage) no-repeat 0 rem(-102px);
            background-size: rem(48px) rem(165px);
        }
        &.current {
            span {
                color: $subject-color;
            }
            .sx-sort {
                @include img-position(0, rem(-120px));
            }
        }
    }
    .price-sort {
        position: absolute;
        top: 50%;
        margin-left: rem(15px);
        @include translate(0, -50%);
        &::before,
        &::after {
            content: '';
            display: block;
            width: 0;
            height: 0;
            border-left: rem(8px) transparent solid;
            border-right: rem(8px) transparent solid;
        }
        &::before {
            margin-bottom: rem(4px);
            border-bottom: rem(10px) $color-999 solid;
        }
        &::after {
            margin-top: rem(4px);
            border-top: rem(10px) $color-999 solid;
        }
        &.arrow-down {
            &::before {
                border-bottom-color: $subject-color;
            }
        }
        &.arrow-up {
            &::after {
                border-top-color: $subject-color;
            }
        }
    }
}

.filtrate-block {
    position: absolute;
    top: rem(77px);
    left: 0;
    width: 100%;
    border-top: 1px $border-color solid;
    @include box-shadow(0px 5px 5px rgba(0, 0, 0, .2));
    background-color: $color-white;
}

.filtrate-bottom {
    a {
        display: inline-block;
        width: 50%;
        height: rem(85px);
        font-size: rem(32px);
        text-align: center;
        color: $color-666;
        line-height: rem(85px);
        &:first-child {
            background-color: $background-color-f6f6f6;
        }
        &:last-child {
            color: $color-white;
            background-color: $subject-color;
        }
    }
}

.filtrate-content {
    padding: rem(35px) rem(30px) rem(75px);
    border-bottom: 1px $border-color solid;
    h2 {
        font-size: rem(30px);
        margin-bottom: rem(25px);
    }
    input[type=number] {
        display: block;
        width: 42%;
        height: rem(62px);
        border: none;
        border-radius: rem(7px);
        background-color: $background-color-f6f6f6;
        text-align: center;
    }
    .section-line {
        width: 16%;
    }
}

.search-list {
    width: 100%;
    overflow: hidden;
    ul {
        li {
            a {
                display: block;
                width: 100%;
                height: 100%;
                overflow: hidden
            }
            img {
                width: 100%;
            }
        }
        &.flexbox {
            margin: 0 rem(-10px);
            padding-top: rem(10px);
            justify-content: space-between;
            align-content: space-between;
            li {
                padding: rem(10px);
                width: 50%;
                a {
                    background-color: $backgroundColor-ebf0f1;
                }
            }
        }
        &.largest-list {
            li {
                width: 100%;
                padding: rem(20px);
                margin: rem(15px) 0;
                background-color: $color-white;
                img {
                    float: left;
                    width: rem(190px);
                    height: rem(190px);
                }
                .product-info {
                    padding: rem(20px) 0 0 rem(220px);
                    h2 {
                        padding-bottom: rem(20px);
                    }
                }
                &:last-of-type {
                    margin-bottom: 0;
                }
            }
        }
    }
}

.today-nav {
    height: rem(76px);
    border-top: 1px $border-color solid;
    background-color: $color-white;
    span {
        display: block;
        font-size: rem(30px);
        line-height: rem(76px);
        color: $color-666;
        text-align: center;
        &.current {
            color: $subject-color;
        }
    }
}